---
title: Exemple
description: Exemple înainte și după ale Ultracite în acțiune.
---

Pentru a ilustra capabilitățile Ultracite, iată câteva exemple practice de probleme pe care le detectează și le corectează. Fiecare exemplu arată codul *înainte* (cu o problemă) și *după* ce Ultracite este aplicat. Aceste exemple demonstrează cum Ultracite îmbunătățește codul în mod automat.

## Formatare automată a codului

### Înainte (format messy)

```tsx title="page.tsx"
function greet(name) { return 'Hello, '+ name + "!!" }
```

În acest cod, spațierea și stilul de concatenare sunt greșite. De asemenea folosește concatenare de stringuri în loc de template literals și combină ghilimele duble cu ghilimele simple.

### După (formatat)

```tsx title="page.tsx"
function greet(name) {
  return `Hello, ${name}!!`;
}
```

Formatter-ul Ultracite a:

- Formatat funcția cu întreruperi de linie adecvate pentru lizibilitate.
- Convertit concatenarea de stringuri într-un template literal (aceasta poate fi o corecție automată generată de o regulă de lint care sugerează template strings pentru lizibilitate).
- Standardizat ghilimelele la backticks pentru template (și ar folosi ghilimele duble consecvent în alte locuri dacă nu este un template).
- Adăugat un punct și virgulă la finalul instrucțiunii `return`.
- Asigurat spațiere corectă în jurul acoladelor și parantezelor.

Dezvoltatorul nu a reformat manual codul – a salvat pur și simplu fișierul, iar Ultracite s-a ocupat de rest. Rezultatul este un cod mai curat și mai consecvent.

Ultracite va avertiza, de asemenea, că `name` nu are tip și va sugera adăugarea unuia.

## Impunerea egalității stricte

### Înainte (posibil bug din cauza egalității libere)

```tsx title="validate.ts"
let isValid = false;
const response = getResponse();
if (response.status == 200) {
  isValid = true;
}
```

Aici, codul folosește egalitate liberă (`==`) pentru a compara `response.status` cu `200`. Folosirea egalității libere poate fi predispusă la erori din cauza coerciției de tip (de ex., `response.status` ar putea fi un string `"200"` și tot ar trece). Regulile stricte ale Ultracite probabil impun folosirea `===` pentru comparații.

### După (corecție automată aplicată de Ultracite)

```tsx title="validate.ts"
let isValid = false;
const response = getResponse();
if (response.status === 200) { // [!code highlight]
  isValid = true;
}
```

Ultracite a înlocuit automat `== 200` cu `=== 200`. Această mică schimbare previne buguri subtile. Corecția a fost aplicată la salvare ca parte a acțiunilor `source.fixAll.biome`. O astfel de regulă (similară cu `eqeqeq` din ESLint) se asigură că dezvoltatorii folosesc verificarea strictă a egalității.

În plus, Ultracite va avertiza că `isValid` nu este niciodată folosit și va sugera eliminarea acestuia.

## Organizarea și curățarea importurilor

### Înainte (importuri neorganizate)

```tsx title="index.tsx"
import Z from './z-module';
import A from './a-module';
import React from 'react';
import { helper } from './util';

const MyComponent = () => (
  <>
    <Z />
    <A />
  </>
);
```

Importurile de aici nu sunt în ordine alfabetică, iar importul helper nu este folosit în fișier.

### După (după salvare cu Ultracite)

```tsx title="index.tsx"
import React from 'react'; // [!code highlight]
import A from './a-module'; // [!code highlight]
import Z from './z-module'; // [!code highlight]
import { helper } from './util'; // [!code --]

const MyComponent = () => (
  <>
    <Z />
    <A />
  </>
);
```

Ultracite (prin funcția de organizare a importurilor a Biome) a sortat importurile alfabetic după numele modulului. De asemenea, a eliminat automat importul `helper` neutilizat. Diferența înainte/după apare imediat la salvare, asigurându-se că secțiunea de importuri este întotdeauna ordonată:

- Fără importuri nefolosite care să aglomereze începutul fișierului.
- Ordine deterministă a importurilor (astfel încât merge-urile și diff-urile să nu fie afectate de ordini diferite adăugate de diferiți dezvoltatori).

Acest lucru conduce la un cod mai ușor de întreținut, în special în fișiere cu multe importuri.

## Corecție pentru accesibilitate

### Înainte

```tsx title="Button.tsx"
<button onClick={submitForm}>
  Open modal
</button>
```

Tipul implicit al unui buton este `submit`, ceea ce determină trimiterea unui formular atunci când este plasat în interiorul unui element form. Acesta probabil nu este comportamentul pe care îl doriți într-o aplicație React. Ultracite vă va avertiza despre acest lucru și va oferi o corecție rapidă pentru a schimba tipul în `button`.

### După (corecție manuală sau rapidă)

```tsx title="Button.tsx"
<button onClick={submitForm} type="button">
  Open modal
</button>
```

Tipul este acum `button`, ceea ce previne trimiterea unui eventual formular părinte atunci când butonul este apăsat.

---

Aceste exemple demonstrează cum Ultracite îmbunătățește calitatea codului:

- Consistență în formatare și stil fără efort.
- Corecții automate pentru multe probleme comune (astfel încât rareori trebuie să corectați lucruri triviale manual).
- Identificarea problemelor reale (astfel încât le puteți rezolva devreme în dezvoltare).

Folosind Ultracite, codul tău nu doar rămâne curat, ci devine și mai puțin buggy și mai accesibil, mulțumită cunoștințelor colective codificate în regulile sale.